<template>
  <div class="rank-offical">
    <div class="content">
      <p class="titlehead">官方榜</p>
      <div class="rank-offical-item" v-for="(item,index) in rankoffical"
           :key="index" @click="showSongSheet(index)">
        <div class="left">
          <img :src="item.Url" alt="">
          <span class="frequency">{{item.Frequency}}</span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item,index) in item.Content" :key="index">
              <p class="first">
                {{index + 1 + '.'}}   {{item.first}}
              </p>
              <p class="second">
                - {{item.second}}
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "RankOffical",
        data(){
          return{

          }
        },
        props:{
            rankoffical: {
                type:Array,
                default(){
                    return[]
                }
            }
        },
        methods:{
            showSongSheet(index){
                // console.log(this.rankoffical[index].id)
                this.$router.push('/songlist/'+ this.rankoffical[index].id)
            },
        },
    }
</script>

<style scoped>
  .rank-offical{
    width: 100%;
  }

  .content{
    width: 100%;
    padding-top: 10px;
    padding-left: 5%;
  }

  .titlehead{
    left: 20px;
    margin-bottom: 10px;
    font-weight: 800;
    font-size: 18px;
    color: #1E1E24;
    letter-spacing: 1px;
  }

  .rank-offical-item{
    width: 94%;
    height: 110px;
    background-color: #f5e9e9;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-radius: 15px;
  }

  .left{
    width: 70px;
    height: 70px;
    position: relative;
    left: 15px;
  }

  .left span{
    position: absolute;
    bottom: 0;
    left: 5px;
    font-size: 12px;
  }

  .left img{
    width: 70px;
    height: 70px;
    border-radius: 10px;
  }

  .frequency{
    color: white;
  }

  .right{
    position: absolute;
    font-size: 12px;
    left: 130px;
  }

  .right ul{
    display:block;
    line-height:30px;

  }

  .right li{

  }

  .first{
    float: left;
    font-size: 13px;
    color: black;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
  }

  .second{
    width: 80px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>